<template>
  <view class="page-bg">
    <!-- 企业信息卡 -->
    <view class="company-card">
      <view class="company-title">
        {{commanyInfo.enterpriseName}}
      </view>
      <view class="company-code">企业编号：{{commanyInfo.enterpriseCode}}</view>
    </view>

    <!-- 上传说明 -->
    <view class="guide-card">
      <view class="guide-title">
        <u-icon name="info-circle-fill" color="#409eff" size="20" style="margin-right:6px;" />
        上传说明
      </view>
      <view class="guide-list">
        <view>• 最多可上传20张图片，支持JPG、PNG格式</view>
        <view>• 单张图片大小不超过5MB，建议尺寸为1200×800像素</view>
        <view>• 图片内容可包括：厂区环境、生产车间、团队活动、产品展示等</view>
        <view>• 上传后可拖动调整图片顺序，点击图片右上角删除按钮可移除图片</view>
        <view>• 请确保上传的图片内容真实、合法，不侵犯他人权益</view>
      </view>
    </view>

    <!-- 图片上传 -->
    <view class="section">
      <view class="section-header">
        <view class="section-title">图片上传</view>
        <view class="section-count">{{ fileList.length }}/20 张</view>
      </view>
      <view class="upload-area">
        <up-upload
          :file-list="fileList"
          :max-count="20"
          :max-size="5 * 1024 * 1024"
          accept="image"
          multiple
          @after-read="afterRead"
          @delete="deletePic"
        >
          <view class="upload-placeholder">
            <up-icon name="photo-fill" color="#b0b3bb" size="48" />
            <view class="upload-text">点击图片到此处上传</view>
            <view class="upload-tip">支持JPG、PNG格式，单张不超过5MB</view>
          </view>
        </up-upload>
      </view>
    </view>

    <!-- 占位预览区 -->
    <view class="preview-card">
      <view class="preview-placeholder" v-if="fileList.length === 0">
        <u-icon name="photo" color="#d3d3d3" size="48" />
        <view class="preview-tip">上传后将在此处展示图片风采</view>
      </view>
      <view class="preview-list" v-if="fileList.length > 0" >
        <view class="preview-item" v-for="(item, index) in fileList" :key="index">
          <view class="preview-image">
            <image :src="item.url" mode="aspectFill"></image>
          </view>
          <!-- <view class="preview-delete" >
            <u-icon name="close" color="#fff" size="20"></u-icon>
          </view> -->
        </view>
      </view>
    </view>
    <view class="fixed-footer">
      <button class="save-btn"  @click="onSave">
        保存
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import {getEnterpriseInfo ,updateEnterprise}from '@/api/index'
import {imgUrl} from '@/config/index'

let commanyInfo = ref({})
onMounted(()=>{
  getEnterpriseInfo().then(res=>{
    console.log(res);
    if(res.code==200){
      console.log(res);
      commanyInfo.value = res.data
      fileLists.value = res.data.enterpriseStylePic.split(',')
      fileList.value = fileLists.value.map(item=>{
        return {
          url:imgUrl+item,
          status:'success',
          message:'',
        }
      })
    }
  })
})
const fileList = ref([])
const fileLists=ref([])
// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
  fileLists.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: imgUrl+result,
    });
    fileLists.value.push(result);
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: imgUrl+'/common/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        // user: 'test',
      },
      success: (res) => {
        setTimeout(() => {
          let url=JSON.parse(res.data).fileName
        resolve(url);
        }, 1000);
      },
    });
  });
};

const onSave = () => {
  updateEnterprise({imageUrl:fileLists.value.join(',')}).then(res=>{
    if(res.code==200){
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
      setTimeout(()=>{
        uni.navigateBack()
      },1500)
    }else{
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  })

}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 160rpx;
  box-sizing: border-box;
}
.company-card {
  background: #fff;
  border-radius: 14px;
  margin: 18px 12px 0 12px;
  padding: 18px 18px 10px 18px;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.04);
}
.company-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
}
.company-code {
  color: #b0b3bb;
  font-size: 15px;
  margin-top: 6px;
}
.guide-card {
  background: #f4f8ff;
  border-radius: 14px;
  margin: 18px 12px 0 12px;
  padding: 16px 16px 10px 16px;
}
.guide-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.guide-list view {
  color: #4a4a4a;
  font-size: 14px;
  margin-bottom: 4px;
}
.section {
  background: #fff;
  border-radius: 14px;
  margin: 18px 12px 0 12px;
  padding: 16px 16px 18px 16px;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.04);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
}
.section-count {
  color: #888;
  font-size: 15px;
}
.upload-area {
  border: 2px dashed #d3d3d3;
  border-radius: 12px;
  background: #fafbfc;
  padding: 24px 0;
  text-align: center;
  margin-bottom: 8px;
  width: 100%;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:660rpx;
}
.upload-text {
  font-size: 17px;
  color: #888;
  margin-top: 8px;
}
.upload-tip {
  font-size: 14px;
  color: #b0b3bb;
  margin-top: 2px;
}
.preview-card {
  background: #fff;
  border-radius: 14px;
  margin: 18px 12px 0 12px;
  padding: 32px 0 32px 0;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #b0b3bb;
}
.preview-tip {
  font-size: 16px;
  margin-top: 10px;
}
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2px 12px 0 rgba(64,158,255,0.04);
  padding: 14px 18px 18px 18px;
  z-index: 99;
}
.save-btn {
  width: 100%;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  /* padding: 14px 0; */
  font-weight: bold;
  letter-spacing: 2px;
  /* box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08); */ 
}
.preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  justify-content: flex-start;
  padding: 8px 16px;
  box-sizing: border-box;
}
.preview-item {
  position: relative;
  width: 120px;
  /* height: 90px; */
  border-radius: 10px;
  overflow: hidden;
  background: #f7f8fa;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.06);
  margin-bottom: 8px;
}
.preview-image image {
  width: 240rpx;
  height: 240rpx;
  /* object-fit: cover; */
  display: block;
}
.preview-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
</style>